<template>
    <div class="main">
        <el-card class="box-card">
            <div v-for="blog in articles" class="text item">
                <router-link :to="{name: 'BlogDetail', params: {content: blog.content}}">
                    <el-container>
                        <el-aside width="150px">
                            <el-image
                                    style="width: 150px; height: 150px"
                                    :src="blog.picture"
                                    fit="contain"></el-image>
                        </el-aside>
                        <el-main>
                            <span style="font-weight: bolder;font-size: larger !important;">{{blog.title}}</span><br>
                            <span>{{blog.synopsis}}</span><br>
                            <span>发布时间：{{blog.publishtime.slice(0,10)}}</span>
                        </el-main>
                    </el-container>
                </router-link>
                <el-divider></el-divider>
            </div>
            <el-pagination
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :page-size="3"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                articles: [],
                page: 1,
                row: 3,
                total: 0,
                search: ""
            }
        },
        methods: {
            searchArticle(page,row){
                const self = this;
                this.search = this.$route.params.search;
                console.log(this.search);
                this.$axios({
                    url: "/article/search",
                    method: "post",
                    data: {"page": page, "row": row, "search":self.search},
                }).then(res => {
                    console.log(res);
                    this.articles = res.data.articleList;
                    this.total = res.data.total;
                });
            },
            handleCurrentChange(val){
                this.searchArticle(val,this.row);
            }
        },
        mounted() {
            this.searchArticle(1,3);
        }
    }
</script>

<style scoped>
    .box-card {
        width: 90%;
        margin: 0 auto;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 10px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-container {
        height: 180px;
    }

    .el-aside {
        text-align: center;
    }

    .el-image {
        display: block;
    }

    .el-main {
        line-height: 25px;
        text-align: left;
        font-size: 15px;
    }

    .el-divider {
        margin: 10px 0;
    }
    .el-pagination{
        height: 30px;
    }
    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }

</style>